
<script setup name="certification">
import { computed } from 'vue'
import { useCertificationData } from './hooks/useCertificationData'
import { SEX_OPTIONS,CERTIFICATION_STATUS } from '@/global/const'
import { onShow, onLoad } from '@dcloudio/uni-app'
const { certificateData,
  handleSelect,
  handleCertificateSubmit,
  getCertificationData,
  userPhotoFile ,
  cardFrontFile,
  cardBackFile,
  pageState
} = useCertificationData()
onLoad(() => {
  getCertificationData()
})
const checkBtnAwaitSignPromise = computed(() => CERTIFICATION_STATUS.待审核 === certificateData.state)
const checkBtnSuccessPromise = computed(() => CERTIFICATION_STATUS.审核通过 ===  certificateData.state)
const checkBtnFailPromise = computed(() => CERTIFICATION_STATUS.审核未通过 ===  certificateData.state)
const checkBtnRollbackPromise = computed(() => CERTIFICATION_STATUS.撤回 ===  certificateData.state)

const handleToUserCenter = () => uni.switchTab({ url: '/pages/profile/profile' })
</script>

<template>
  <view class="certification-container"                  >
    <blockquote class="icon-container" v-if="checkBtnAwaitSignPromise">
      <uni-icons type="calendar-filled" size="100" />
      <up-text type="primary" text="您已提交审核，请耐心等待" />
    </blockquote>
    <blockquote class="icon-container" v-else-if="checkBtnSuccessPromise">
      <uni-icons type="checkbox-filled" size="100" />
      <up-text type="success" text="恭喜，您提交的认证申请已通过" />
    </blockquote>
    <blockquote class="icon-container" v-else-if="checkBtnFailPromise">
      <uni-icons type="clear" size="100" />
      <up-text type="error" text="您提交的认证申请未通过，请重新提交" />
    </blockquote>
    <blockquote class="icon-container" v-else-if="checkBtnRollbackPromise">
      <uni-icons type="close" size="100" />
      <up-text type="warning" text="您提交的认证申请已撤回" />
    </blockquote>
    <blockquote v-else>
      <uni-section class="certification-info" title="认证信息" type="line">
        <uni-forms label-position="top" label-width="120"  ref="baseForm" :modelValue="certificateData">
          <uni-forms-item label="真实姓名" >
            <uni-easyinput v-model="certificateData.userName" placeholder="真实姓名" />
          </uni-forms-item>
          <uni-forms-item label="年龄" >
            <uni-easyinput v-model="certificateData.age" type="number" placeholder="请输入年龄" />
          </uni-forms-item>
          <uni-forms-item label="性别" >
            <uni-data-select v-model="certificateData.sex" :localdata="SEX_OPTIONS"  />
          </uni-forms-item>
          <uni-forms-item label="联系方式" >
            <uni-easyinput v-model="certificateData.phone" placeholder="请输入联系方式" />
          </uni-forms-item>
          <uni-forms-item label="身份证号码" >
            <uni-easyinput v-model="certificateData.idNumber" placeholder="请输入身份证号码" />
          </uni-forms-item>
          <uni-forms-item label="常驻地址" >
            <uni-easyinput v-model="certificateData.address" placeholder="请输入地址" />
          </uni-forms-item>
          <uni-forms-item label="本人照片" >
            <uni-file-picker v-model="userPhotoFile" @select="file => handleSelect(1,file)" limit="1" />
          </uni-forms-item>
          <uni-forms-item  label="身份证正面照片" >
            <uni-file-picker v-model="cardFrontFile" @select="file => handleSelect(2,file)" limit="1" />
          </uni-forms-item>
          <uni-forms-item label="身份证反面照片" >
            <uni-file-picker v-model="cardBackFile" @select="file => handleSelect(3,file)" limit="1" />
          </uni-forms-item>
        </uni-forms>
      </uni-section>
    </blockquote>
    <view class="addBtn">
      <up-button class="btn" v-if="checkBtnAwaitSignPromise"  :loading="loading" @click="() => handleCertificateSubmit(-1,'撤回')" type="error">撤回申请</up-button>
      <up-button class="btn" v-else-if="checkBtnSuccessPromise"  :loading="loading" @click="handleToUserCenter" type="success">返回个人中心</up-button>
      <up-button class="btn" v-else-if="checkBtnFailPromise || checkBtnRollbackPromise"  :loading="loading" @click="() => certificateData.state = -2" type="error">重新填写</up-button>
      <up-button class="btn" v-else :loading="loading" @click="handleCertificateSubmit" type="primary">提交</up-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 20rpx 20rpx 20rpx 20rpx;
  height: 100%;
  padding-bottom: 170rpx;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
.certification-container {
  height: 100%;
  overflow: auto;
}
:deep(.uni-forms) {
  padding: 10px 15px;
  .uni-forms-item {
    margin-bottom: 20rpx;
  }
}
.icon-container {
  height: 100%;
  display: flex;
  align-items: center !important;
  justify-content: center;
  flex-direction: column;
  :deep(.u-text) {
    display: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    flex: unset !important;
    width: unset !important;
    .u-text__value {
      font-weight: bold !important;
    }
  }
  :deep(.uniui-calendar-filled) {
    color: $u-primary !important;
  }
  :deep(.uniui-checkbox-filled) {
    color: $u-success !important;
  }
  :deep(.uniui-clear) {
    color: $u-error !important;
  }
  :deep(.uniui-close) {
    color: $u-warning !important;
  }
}

.addBtn {
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  .btn {
    width: 100%;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
